<template>
    <a-modal
      title="编辑"
      :width="640"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" v-bind="formLayout">
          <a-form-item label="ID" style="display: none;">
            <a-input v-decorator="['id']" />
          </a-form-item>
          <a-form-item label="姓名">
            <a-input v-decorator="['realName', { rules: [{ required: true, message: '请输入姓名' }] }]" />
          </a-form-item>
          
          <a-form-item label="推荐人">
            <a-select
              show-search
              placeholder="请选择"
              style="width: 100%"
              :options="options"
              :filter-option="false"
              @search="filterOption"
              v-decorator="['topUserId', { rules: [{ required: false, message: '请选择' }] }]"
            ></a-select>
          </a-form-item>
          
          <a-form-item label="是否赋予角色">
            <a-radio-group v-decorator="['op', { rules: [{ required: true, message: '请选择' }]}]" @change="changeOp">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <!-- <a-form-item label="选择角色" v-if="mdl.op===1">
            <a-select mode="multiple" v-decorator="['roleIds', { rules: [{ required: true, message: '请选择角色' }] }]" placeholder="请选择角色">
              <a-select-option :value="item.id" v-for="item in roleData" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item> -->
          <a-form-item label="选择角色" v-if="mdl.op===1">
            <a-select v-decorator="['roleId', { rules: [{ required: true, message: '请选择角色' }] }]" placeholder="请选择角色">
              <a-select-option :value="item.id" v-for="item in roleData" :key="item.id">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
  
    </a-modal>
  </template>
  
  <script>
  import { roleList } from '@/api/role'
  import { listUserForSearch } from '@/api/user'
  import pick from 'lodash.pick'
  const fields = ['id', 'op', 'roleId', 'realName', 'topUserId']
  
  export default {
    name: 'UserRole',
    data () {
      return {
        options: [],
        visible: false,
        formLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12, offset: 1 }
          }
        },
        form: this.$form.createForm(this),
        mdl: {},
        roleData: [],
        confirmLoading: false
      }
    },
    created () {
      this.getRoleList()
      // 防止表单未注册
      fields.forEach(v => this.form.getFieldDecorator(v))
      // 当 model 发生改变时，为表单设置值
      this.$watch('mdl', () => {
        if (this.mdl) {
          this.mdl.op = 1
          this.form.setFieldsValue(pick(this.mdl, fields))
        }
        if (this.mdl.topUserId) {
            this.$nextTick(() => {
              setTimeout(() => { // 添加延时操作
                 this.listUserForSearch({userIds: [this.mdl.topUserId]})
              }, 500)
            })
        }else {
          this.listUserForSearch({page: 1})
        }
      })
    },
    methods: {
      filterOption (input) {
        this.listUserForSearch({query: input});
      },
      listUserForSearch (key) {
          listUserForSearch(key).then(res => {
              this.options = res.data.map(item => {
                  return {
                      ...item,
                      value: item.id,
                      label: item.realName + '（' + item.mobile + ')'
                  }
              })
          }).catch((err) => {})
      },
      getRoleList () {
        const that = this
        roleList({ page: 1, limit: 9999 }).then(res => {
          that.roleData = res.data.records
        })
      },
      changeOp (e) {
        this.mdl.op = e.target.value
      },
      handleOk () {
        this.$emit('ok')
      },
      handleCancel () {
        this.visible = false
        this.form.resetFields()
      }
    }
  }
  </script>
  
  <style scoped>
  
  </style>
  